<!--
 * @Author: qf
 * @Date: 2024-02-23 14:33:26
 * @LastEditors: qf
 * @LastEditTime: 2024-04-22 11:39:42
 * @Description: 体系认证
-->
<template>
  <div class="banner">
    <div class="banner-title">
      <h3>体系认证</h3>
      <h5>专家现场辅导，高效放心，最快7天通过审核，国家认监可查</h5>
      <div class="banner-tags">
        <span class="banner-tag-item" v-for="tag in bannerTags">
          <i class="iconfont icon-Vector4"></i>
          {{ tag }}
        </span>
      </div>
      <div class="button"><span @click="show = true">立即咨询</span></div>
    </div>
    <img :src="imgUrl + 'system-certification-bg.png'" alt="" />
  </div>
  <div class="part">
    <div class="part-title">
      <div>认证服务</div>
      <p>CERTIFICATION SERVICE</p>
    </div>
    <ul>
      <li v-for="(el, i) in arrData" :key="i">
        <img :src="el.img" alt="" />
        <div class="half-circle-wrapper">
          <div class="half-circle">
            <div>{{ el.title }}</div>
            <div>{{ el.title2 }}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="part">
    <div class="part-title">
      <div>企业体系认证的好处</div>
      <p>BENEFITS OF ENTERPRISE SYSTEM CERTIFICATION</p>
    </div>
    <ul class="benefit-wrapper">
      <li v-for="(el, i) in arrData2" :key="i">
        <img :src="el.img" alt="" />
        <div>
          <span v-for="item in el.title">{{ item }}</span>
        </div>
      </li>
    </ul>
  </div>
  <div class="part">
    <div class="part-title">
      <div>我们的优势</div>
      <p>OUR ADVANTAGES</p>
    </div>
    <ul class="advantage-wrapper">
      <li v-for="(el, i) in advantageData" :key="i">
        <img :src="el.img" alt="" />
        <div>
          <span class="advantage-title">{{ el.title }}</span>
          <span class="advantage-text">{{ el.text }}</span>
        </div>
      </li>
    </ul>
  </div>
  <div class="part">
    <div class="part-title" style="margin-top: 60px">
      <div>流程服务</div>
      <p>PROCESS SERVICES</p>
    </div>
    <div class="process-container">
      <process-list
        v-for="(item, index) in processData"
        :key="index"
        :item="item"
      ></process-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  arrData,
  arrData2,
  processData,
  advantageData,
  bannerTags,
} from "./constants";
import processList from "../../financial-tax-consult/major/components/process-list.vue";
import { imgUrl } from "@/utils/common";
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  .banner-title {
    position: absolute;
    top: 53%;
    left: 31%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: left;
    h3 {
      font-size: 60px;
      line-height: 60px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    h5 {
      font-weight: 400;
      font-size: 20px;
      line-height: 36px;
      margin-bottom: 20px;
    }
    p {
      display: inline-block;
      padding: 12px 16px;
      background: #809bc0;
      border-radius: 3px;
      font-size: 16px;
      line-height: 24px;
    }
    div.button {
      margin-top: 46px;
      span {
        cursor: pointer;
        display: inline-block;
        padding: 13px 50px;
        background-color: #1678ff;
        color: #fff;
        border-radius: 3px;
        font-weight: 400;
        font-size: 20px;
      }
    }
    .banner-tags {
      width: 470px;
      & :nth-child(4),
      & :nth-child(5) {
        margin-bottom: 0;
      }
    }
    .banner-tag-item {
      display: inline-block;
      padding: 4px 16px;
      text-align: center;
      border-radius: 30px;
      border: 1px solid #ffffff;
      margin-right: 16px;
      margin-bottom: 16px;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}

ul {
  display: flex;
  width: 66.7%;
  margin: 20px auto 100px;
  justify-content: space-between;

  li {
    width: 320px;
    height: 280px;
    margin-right: 21px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #dfe1e6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;

    &:last-child {
      margin-right: 0;
    }

    img {
      margin-bottom: 22px;
    }
    .half-circle-wrapper {
      height: 90px;
      overflow: hidden;
    }
    div.half-circle {
      width: 248px;
      height: 248px;
      border-radius: 50% 50% 0 0;
      font-size: 18px;
      background: #f4f7fe;
      text-align: center;
      padding-top: 24px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #7a869a;
      line-height: 28px;
    }
  }
}

ul.benefit-wrapper {
  img {
    margin-bottom: 0;
  }
  li {
    justify-content: flex-start;
    width: 304px;
    height: 343px;
  }
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    span {
      color: #172b4d;
      font-weight: 600;
      font-size: 18px;
      line-height: 30px;
    }
  }
}

ul.advantage-wrapper {
  li {
    justify-content: center;
    width: 244px;
    height: 246px;
  }
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    .advantage-title {
      font-weight: 600;
      font-size: 24px;
      color: #1678ff;
      line-height: 30px;
      margin-bottom: 8px;
    }
    .advantage-text {
      font-size: 20px;
      color: #7a869a;
      line-height: 24px;
    }
  }
}

.process-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 100px;
}
</style>
